<!--
  使用指令，会让代码量减少、美观

  下面有 几种写法，没有注释掉的是 认真的代码
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn
      :number1='num1'
      :number2='num2'
    ></cpn>
  </div>

  <template id='cpn'>
    <!-- 1. v-model == :value+@input -->
    <!-- <div>
      <h2>props: {{dnumber1}}</h2>
      <input type="text"
        :value='dnumber1'
        @input='e => dnumber1 = Number(e.target.value)'
      >
      <br>
      <h2>props: {{dnumber2}}</h2>
      <input type="text"
        :value='dnumber2'
        @input='e => dnumber2 = Number(e.target.value)'
      >
    </div> -->

    <!-- 2. 使用v-model -->
    <div>
      <h2>props: {{dnumber1}}</h2>
      <input type="text"  v-model='dnumber1'>
      <br>
      <h2>props: {{dnumber2}}</h2>
      <input type="text" v-model='dnumber2'>
    </div>
  </template>

  <script src="../../js/vue.js"></script>
  <script>

    const cpn = {
      template: '#cpn',
      props: {
        number1: Number,
        number2: Number,
        name: '',
      },
      data() {
        return {
          dnumber1: this.number1,
          dnumber2: this.number2
        }
      },
      watch: {
        dnumber1(newValue) { //data
          this.number1 = Number(newValue)
          this.$emit('num1change', newValue)
        },
        dnumber2(newValue) { //data
          this.number2 = Number(newValue)
          this.$emit('num2change', newValue)
        },
        name(newValue) { //props
          console.log('data/props => name属性 有变化')
        }
      }
    }

    const app = new Vue({
      el: '#app',
      data: {
        num1: 1,
        num2: 0,
      },
      components: {
        cpn,
      },
      methods: {

      }
    })
  </script>
</body>
</html>